<template>
    <div class="tab-scroller">
        <div class="cell-group">
            <div class="cell-group__row">
                <div class="label">规划用地性质：</div>
                <div class="content">{{ resolveLandOfUse(planInfo.landNature) || '--' }}</div>
            </div>
            <div class="cell-group__row">
                <div class="label">兼容用地性质：</div>
                <div class="content">{{ resolveLandOfUse(planInfo.compatibleLandNature) || '--' }}</div>
            </div>
            <div class="cell-group__row">
                <div class="label">建筑用地面积：</div>
                <div class="content">{{ planInfo.buildLandArea || '--' }}</div>
            </div>
            <div class="cell-group__row">
                <div class="label">建筑密度：</div>
                <div class="content">
                    {{ planInfo.buildDensityLower || 0 }}% - {{ planInfo.buildDensityUpper || 0 }}%
                </div>
            </div>
            <div class="cell-group__row">
                <div class="label">容积率：</div>
                <div class="content">
                    {{ planInfo.plotRateLower || 0 }}% - {{ planInfo.plotRateUpper || 0 }}%
                </div>
            </div>
            <div class="cell-group__row">
                <div class="label">绿地率：</div>
                <div class="content">
                    {{ planInfo.greenRateLower || 0 }}% - {{ planInfo.greenRateUpper || 0 }}%
                </div>
            </div>
            <div class="cell-group__row">
                <div class="label">建筑限高：</div>
                <div class="content">
                    {{ planInfo.buildHeightLower || 0 }}% - {{ planInfo.buildHeightUpper || 0 }}%
                </div>
            </div>
            <div class="cell-group__row">
                <div class="label">详细规划：</div>
                <div class="content">
                    <template v-if="planInfo.detailPlanAttachmentFiles && planInfo.detailPlanAttachmentFiles.length">
                        <el-link 
                            type="primary" 
                            v-for="file in planInfo.detailPlanAttachmentFiles" 
                            :key="file.id"
                            @click="downloadFile(file.filePath)"
                            style="margin-right:10px;"
                        >{{ file.fileName }}</el-link>
                    </template>
                    <template v-else>--</template>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { api_getLandOfUseList } from '@/api/app';
import { parseTime, convertTreeToList } from '@/utils';
const props = defineProps({
    landData: {
        type: Object,
        default: {}
    }
});

const planInfo = computed(() => {
    return props.landData?.landPlanCondition || {};
});

// 获取土地用途
const landOfUseList = ref([]);
function getLandOfUseList() {
    api_getLandOfUseList().then(res => {
        landOfUseList.value = res.data;
    })
}
getLandOfUseList();

// 解析土地用途
function resolveLandOfUse(val) {
    if (!val || val.length <= 0) {
        return '--';
    }

    const landUseList = [];
    landOfUseList.value.forEach(item => {
        let tmp = convertTreeToList(item);
        landUseList.push(...tmp);
    });

    const arr = val.split(',');
    const code = arr[arr.length - 1];
    return landUseList.find(item => item.code === code)?.name;
}

// 下载
function downloadFile(filePath) {
    const link = document.createElement('a');
    link.style.display = 'none';
    link.href = filePath;
    document.body.appendChild(link);
    link.click();
    setTimeout(() => {
        uni.postMessage({
            data: {
                action: 'DOWNLOAD'
            }
        })
    }, 300);
}
</script>

<style lang="scss" scoped>
.tab-scroller {
    height: 360px;
    transition: all .3s;
    overflow-y: auto;
    &::-webkit-scrollbar-thumb {
        background-color: #e1e6ec;
    }

    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(144, 147, 153, 0.5);
    }
}

.cell-group {
    background-color: #fff;
    padding: 10px 15px;

    &__legend {
        height: 51px;
        padding-left: 23px;
        padding-right: 15px;
        display: flex;
        align-items: center;
        background-color: #F3F4F8;
        font-size: 15px;
        color: #333;
        font-weight: 600;
        position: relative;

        &::before {
            content: '';
            width: 3px;
            height: 15px;
            background-color: #0096CF;
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    &__row {
        display: flex;
        // align-items: center;
        align-items: flex-start;
        // height: 30px;
        line-height: 30px;
        font-size: 14px;

        .label {
            color: #333;
        }

        .content {
            color: #666;
            flex: 1;
        }

        .download {
            text-decoration: underline;
            color: #077CB1;
        }
    }
}
</style>